<template>
  <div
    class="echart"
    ref="echart"
    :style="{ width: '100%', height: height }"
  ></div>
</template>

<script>
export default {
  name: "EChartsComponent",
  props: {
    option: {
      type: Object,
      default: () => {},
    },
    height: {
      type: String,
      default: "400px",
    },
  },
  mounted() {
    this.$nextTick((res) => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      const myChart = echarts.init(this.$refs.echart);
      myChart.setOption(this.option);

      // 监听窗口尺寸变化，调整图表大小
      window.addEventListener("resize", () => myChart.resize());
    },
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeChart);
  },
};
</script>

<style scoped>
/* 样式可以根据需求调整 */
</style>
